<template>
  <div>
    <div class="shopcar">
    <div class="shophead">
     <router-link to="/myself"> <h1 class="h1">&lt;</h1></router-link>
      <h1>购物车</h1>
    </div>
   
      <Shopcar :arr=" this.$store.state.shop.arr"/>
      <div class="shopbot">
        <img src="img/shopbg.png" alt="">
        <span>还没有加购任何商品,快去选购吧</span>
        <button>去逛逛</button>
      </div>
   </div>
  </div>
</template>

<script>
import Shopcar from "@/compents/shopcar.vue"

export default {
    data(){
        return {
            
        }
    },
created(){
    // 因为异步请求在vuex的actions中所以我需要调用actions
    this.$store.dispatch("actiondemoa",{url:"/shop"})
   
  
  },
  components:{
    Shopcar
  }
}

</script>

<style scoped>
  .shopcar{
    background-color: #F2F2F2;
    height: 100vh;
    width: 100%;
  }
  .shophead{
    width: 3.5rem;
    height: 0.5rem;
    display: flex;
    align-items: center;
    margin: auto;
    background-color:  #F2F2F2;
  }
  .h1{
   
    font-size: 0.3rem;
    color: black;
  }
  .shophead>h1{
     margin-left: 40%;
  }
  .shopbot{
    width: 3.5rem;
    height: 2.4rem;
    margin: auto;
    background-color: white;
    border-radius: 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .shopbot>button{
    display: block;
    width: 0.8rem;
    height: 0.3rem;
    background-color: #FECF05;
    border-radius:0.2rem ;
    margin-top: 0.2rem;
    outline: none;
    border: 0;
  }
  .shopbot>img{
    width: 1rem;
    height: 1rem;
  }
</style>